<template>
    <div id="newsccc">
       <div id="newspage">
            <ul id="newscontent" v-for="book in booklist" :key="book">
               <li id="newscontentitem" >
                 <div id="yearmonth">
                   <i id="year"> {{book.book_time.split('-')[0]}}</i>
                   <i id="date">{{book.book_time.split('-')[1]}}/{{book.book_time.split('-')[2]}}</i>
                   <span id="newsname"> {{book.book_title}}</span>
               </div>
                 <p id="newsit"> {{book.book_name}}</p>
                 </li>  
            </ul>
            <ul id="pagetip">
            
              <li></li>
            <li class="page">
                <a href="#" :class="i==currentPage?'current':''" @click="currentPage=i" v-for="i in page" :key="i">
                  {{i}}
                  </a>
            </li>
             <li></li>
          
            </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:'Newspage',
    data(){
  return{
     booklist: [],
            listsize: 1,
            currentPage: 1

  }   },
  created(){
            this.initBook();
        },
  beforeUpdate(){
            this.initBook();
        },
  computed: {
            page(){ //返回页码
                let getPage = Math.ceil(this.listsize / 5);//取整，有小数则+1
                if (getPage === 0) getPage = 1;
                return getPage;
            }
        },
  methods: {
            initBook(){
              axios({
                method:'get',
                url:'/list?page='+this.currentPage,
              }).then((res)=>{
                // 对当前页进行排序
                res.data.booklist.sort(function(a, b) {
                      return b.book_time> a.book_time ? 1 : -1;
                });
                  this.booklist = res.data.booklist;
                            this.listsize = res.data.listsize;//总条数
              }).catch((err)=>{
                console.log(err)
              })
                
            }
        },
 
}
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
#newsccc{
  margin: 0 30px;
}
#newspage ul{
   list-style: none;
  //  margin-top: 10px;
}
#newscontent{
  text-align: left;
}
#pagetip{
  display: flex;
  text-align: center;
}
#pagetip li{
  flex: 1;
  margin: 2em 0;
}
a{
  text-decoration: none;
  // width: 50px;
  margin-left: 5px;
  width: 2em;
  // background-color: #343434;
  color: #3a3535;
}
a.current{
  color: rgb(92, 156, 230);
  // background-color: #000000;
}
#year{
font-size: 1.8em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(87, 186, 211);
}
#date{
margin-right: 3em;
}
#newsit{
  text-indent: 2em;
}
</style>